<!--
 描述: 动态轮播折线图
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
    <div class="wrap-container sn-container" style="width: 900px; height: 400px;">
        <div class="sn-content">


            <span style="font-size: 35px; margin-top: 20%;margin-bottom: -25px;; top: 0%; color: #00c2ff;">
                <img src="../assets/下雨.png" style="margin-right: 10px; margin-left: 10px; margin-top: 10px;">
                <span>动态雨量展示</span>
            </span>

            <div class="chartsdom" id="chart_dt"></div>
        </div>
    </div>
</template>

<script>



import * as echarts from "echarts";
export default {
    name: "dynamicLine",
    data() {
        return {

            timer: null,
            xData: [],
            now: +new Date(2019, 1, 1),
            value: Math.random() * 1000,
            oneDay: 24 * 3600 * 1000

        }
    },
    mounted() {
        this.getEchart();
    },
    methods: {
        randomData(randdata) {

            this.now = new Date(+this.now + this.oneDay);
            this.value = randdata;
            return {
                name: this.now.toString(),
                value: [
                    [this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate()].join('/'),
                    Math.round(this.value)
                ]
            };
        },
        getEchart() {
            const myChart = echarts.init(document.getElementById('chart_dt'), "dark");
            for (let i = 0; i < 1000; i++) {
                this.xData.push(this.randomData());
            }

            this.option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '12%',
                    bottom: '3%',
                    containLabel: true
                },
                visualMap: {
                    show: false,
                    dimension: 1,
                    pieces: [{
                        gte: 5,
                        lte: 55,   // 小于 55就是绿色
                        color: "#0BD2C8",
                    },
                    {
                        gt: 55,  // 大于 55 就是红色警告
                        color: "#f97f7f",


                    },
                        // {
                        //   lt: 50,
                        //   color: "#f97f7f",
                        // },
                    ],
                },
                calculable: true,
                xAxis: {
                    type: 'time',
                    name: '时-分-秒',
                    boundaryGap: false,
                    splitNumber: 5,
                    axisLabel: {
                        formatter(value) {
                            let date = new Date(value);
                            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#2867a8'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    name: '                  实时雨量（ mm ）',
                    min: 0,
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#2867a8'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                },
                series: [{
                    name: '实时降雨量',
                    type: 'line',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    itemStyle: {
                        opacity: 0,
                    },
                    data: this.xData,
                    smooth: true
                }]
            }

            myChart.setOption(this.option, true);

            window.addEventListener('resize', () => {
                myChart.resize();
            });

            this.timer = setInterval(() => {
                // for (let i = 0; i < 5; i++) {
                //     this.xData.shift();
                //     this.xData.push(this.randomData());
                // }

                myChart.setOption(this.option, true);
            }, 500);
        },
        Set_DY_Data(setdata) {

            // console.log("setdata", setdata);
            this.xData.shift();
            this.xData.push(this.randomData(setdata));
            // console.log("this.xData", this.xData[0]);
            // myChart.setOption(this.option, true);

        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
};
</script>

<style lang="scss" scoped>
.sn-container {
    // left: 1282px;
    // top: 1548px;
    width: 586px;
    height: 400px;

    .chartsdom {
        width: 100%;
        height: 100%;
    }
}
</style>
